feat: add dynamicColor prop and DynamicTheme refactor#4925
Open
adrcotfas wants to merge 1 commit into@adrcotfas/refactor/accesibilityfrom
Open
feat: add dynamicColor prop and DynamicTheme refactor#4925adrcotfas wants to merge 1 commit into@adrcotfas/refactor/accesibilityfrom
adrcotfas wants to merge 1 commit into@adrcotfas/refactor/accesibilityfrom
Conversation
|
The mobile version of example app from this branch is ready! You can see it here. |
adrcotfas
force-pushed
the
@adrcotfas/refactor/dynamic_themes
branch
from
62ea8dc to
96603d4
Compare
|
Hey @adrcotfas, thank you for your pull request 🤗. The documentation from this branch can be viewed here. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Motivation
Before this PR, using dynamic colors required every consumer to wire up the same boilerplate: import
DynamicLightTheme/DynamicDarkTheme, detect Android API 31+ themselves, write a useMemo to switch between them, and keep it in sync with dark mode. The library provided the building blocks but left the assembly to the app.This PR absorbs that complexity into
PaperProvidervia a singledynamicColorprop. PassdynamicColorand the provider handles palette selection, API level detection, dark/light switching, and graceful fallback on iOS/web -- with no app-side logic needed.Alongside that, the
DynamicTheme.android.tsximplementation is refactored from ~500 lines of repetitive pick() calls into a typed role-map table with Palette.* ref constants as ground truth. This fixes two latent bugs in the original: error roles and MCL-only surface roles were calling PlatformColor with hex strings on API 31-33 (invalid, silently transparent), andsurfaceVariantwas missing its API 31 accent resources entirely.Other changes in scope:
ThemeBaseinlined intoTheme(kept as a deprecated Pick<> alias), andisDynamicColorSupportedexported from the library root so consumers can conditionally show a dynamic theme toggle without re-implementing the platform check.Related issue
Related issue
See https://www.notion.so/callstack/React-Native-Paper-Foundation-for-MD3-Expressive-34c5d027c0f880edba3df107cd35946f?source=copy_link
Merge order:
Test plan
yarn typescript-- no new type errorsyarn test-- all tests pass